<template>
	<view class="main-content">
		<scroll-view scroll-y :style="{height: scrollHeight}" class="list-box form-data">
			<!-- <text class="title">信息填写</text> -->
			<view style="padding-top: 20rpx;">
				<uni-forms ref="masterEnterForm" :modelValue="FormData" :rules="rules" label-width="200rpx">
					<uni-forms-item label="姓名" name="name" required>
						<input type="text" placeholder="请输入" placeholder-class="placeholder-class"
							v-model="FormData.name" style="text-align: right;" />
					</uni-forms-item>
					<uni-forms-item label="专业技能方向" name="skill" required>
						<!-- <uni-data-select v-model="FormData.skill" :localdata="typeArr"></uni-data-select> -->
						<view class="row-end-1" @click="selectShow = true">
							<view style="text-align: right;">
								<text class="placeholder-class" v-if="FormData.skill == ''">请选择</text>
								<text v-else
									style="font-size: 28rpx;">{{forrmatterEnmu(skillList,FormData.skill)}}</text>
							</view>
							<uni-icons type="right" color="#666" size="36rpx"></uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item label="身份证" name="idCard" required>
						<input type="idcard" placeholder-class="placeholder-class" placeholder="请输入"
							v-model="FormData.idCard" style="text-align: right;" :maxlength="18"/>
					</uni-forms-item>
					<uni-forms-item label="联系方式" name="phoneNumber" required>
						<input type="number" placeholder-class="placeholder-class" placeholder="请输入"
							v-model="FormData.phoneNumber" style="text-align: right;" :maxlength="11"/>
					</uni-forms-item>
					<uni-forms-item label="选择地址" name="province" required>
						<view class="row-end-1" @click="show = true">
							<view style="text-align: right;">
								<text class="placeholder-class" v-if="region == ''">请选择</text>
								<text v-else style="font-size: 28rpx;">{{region}}</text>
							</view>
							<uni-icons type="right" color="#666" size="36rpx"></uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item label="详细地址" name="addr">
						<input type="text" placeholder-class="placeholder-class" placeholder="请输入详细地址"
							v-model="FormData.addr" style="text-align: right;" />
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="form-item-vertical">
				<view class="label">自我介绍</view>
				<textarea class="JTxtArea lg" placeholder-class="placeholder-class" placeholder="请简单进行自我介绍"
					v-model="FormData.remark" :maxlength="100" :data-maxnum="FormData.remark.length+'/100'">
					</textarea>
			</view>
			<view class="form-item-vertical">
				<view class="label">
					身份证正反面照片
				</view>
				<view class="upload-box">
					<you-upload :maxCount="2" uploadWidth="150rpx" uploadHeight="150rpx" iconSize="60"
						name="man-add-fill" @changeFile="changeFile($event, 'certificate')"></you-upload>
				</view>
			</view>
			<view class="form-item-vertical after-content">
				<view class="label">
					近期照片
				</view>
				<view class="upload-box">
					<you-upload :maxCount="1" uploadWidth="150rpx" uploadHeight="150rpx" iconSize="50"
						@changeFile="changeFile($event, 'jobPic')"></you-upload>
				</view>
			</view>
			<!-- <view class="form-item-vertical">
				<view class="label">近期照片</view>
				<view class="upload-box">
					<you-upload :maxCount="1" uploadWidth="150rpx" uploadHeight="150rpx" iconSize="50"
						@changeFile="changeFile($event, 'jobPic')"></you-upload>
				</view>
			</view> -->
		</scroll-view>
		<!-- 按钮 -->
		<view class="form_bottom_btn">
			<view class="agreement">
				<view class="agreement-model">
					<u-checkbox-group @change="changeAgreement" class="radio-box">
						<u-checkbox :model="agreement" shape="circle" label=" " name="1"></u-checkbox>
					</u-checkbox-group>

					<view class="">
						<text :style="{color: color}">请先阅读隐私协议，勾选则代表同意协议内容</text>

						<text class="agreement-name" @click.stop="openPrivacy">《消易云服务隐私协议》</text>
						<!-- <text class="agreement-name" @click.stop="openPrivacy">《{{protocolTitle}}》</text> -->
					</view>
				</view>
			</view>
			<view class="btn-box">
					<view :class="bottomBtnConfig[0].class" @click="formSubmit">
						{{ bottomBtnConfig[0].text }}
					</view>
			</view>
		</view>

		<!-- 选择城市 -->
		<!-- <u-popup :show="show" @close="close" @open="open"> -->
		<!-- </u-popup> -->
		<u-picker :show="show" ref="uPicker" :columns="cityColumns" @confirm="cityConfirm" keyName="cname"
			@change="changeHandler" @cancel="show = false"></u-picker>

		<u-picker :show="selectShow" :columns="columns" keyName="dictLabel" @cancel="selectShow = false"
			@confirm="confirm" :immediateChange="true"></u-picker>
	</view>
</template>

<script>
	import Home from '@/api/home'
	import Apply from '@/api/apply.js'
	import {
		forrmatterEnmu
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				FormData: {
					name: '',
					certificate: '',
					idCardPic: '',
					jobPic: '',
					skill: '',
					idCard: '',
					phoneNumber: '',
					remark: '',
					province: '',
					provincestring: '',
					city: '',
					citystring: '',
					county: '',
					countystring: '',
					addr: '',
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					idCard: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证',
							},
							{
								minLength: 18,
								maxLength: 18,
								errorMessage: '身份证长度在18位',
							}
						]
					},
					skill: {
						rules: [{
							required: true,
							errorMessage: '请选择技能方向',
						}]
					},
					phoneNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}]
					},
					province: {
						rules: [{
							required: true,
							errorMessage: '请选择地址',
						}]
					},
				},
				columns: [
					[],
				],
				scrollHeight: '',
				bottomBtnConfig: uni.$u.deepClone([{
					text: '提交申请',
					class: 'confirm',
					funcName: 'formSubmit'
				}]),
				fileImage: {
					idCardFront: [],
					idCardBack: []
				},
				selectShow: false,
				skillList: [],
				agreement: null,
				show: false,
				cityColumns: [],
				cityList: [],
				region: '',
			}
		},
		onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 74 + 'px'
			this.getSkillList()
			this.getCityList()
		},
		methods: {
			forrmatterEnmu,
			/**显示地图方法*/
			async toMap() {
				await uni.chooseLocation({
					success: res => {
						this.myAmapFun.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							success: succ => {
								const datas = {
									// city: succ[0].regeocodeData.addressComponent.adcode,
									cityString: succ[0].desc,
									longitude: res.longitude,
									latitude: res.latitude
								}
								this.$store.commit('SET_CITYOBJECT', datas)
								this.cityObject = this.$store.getters.city
								console.log(this.$store.getters.city);
								this.nowArea = succ[0].desc
								this.onRefresh()
							},
							fail: err => {
								console.log(err)
							}
						})
					}
				})
			},
			getCityList() {
				Home.getCity().then(res => {
					this.cityList = res.data
					this.cityColumns[0] = res.data?.filter(item => item.ctype == 1)
					this.cityColumns[1] = res.data?.filter(item => item.parentId == 2)
					this.cityColumns[2] = res.data?.filter(item => item.parentId == 52)
				})
			},
			changeAgreement(v) {
				if (v.length) {
					this.agreement = true
				} else {
					this.agreement = false
				}
			},
			formSubmit() {
				if (!this.agreement) {
					uni.showToast({
						title: '请先阅读隐私协议并勾选',
						icon: 'none',
					})
					return
				}
				this.$refs.masterEnterForm.validate().then(res => {
					Home.setMasterEnter(this.FormData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '入驻申请，请耐心等待审核结果'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home'
								})
							}, 1000)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			changeFile(e, key) {
				if (key == 'certificate') {
					this.FormData.certificate = e
				} else {
					this.FormData.jobPic = e
				}
			},
			confirm({
				value
			}) {
				console.log(value[0],888);
				this.FormData.skill = value[0].dictValue;
				this.selectShow = false;
			},
			// 跳转隐私协议
			openPrivacy() {
				uni.navigateTo({
					// url: `/subPages/mine/publicAgreement?id=${this.type == 'input' ? '11' : '10'}`
					url: `/subPages/mine/publicAgreement?id=11`
				})
			},
			getSkillList() {
				Apply.skillList().then(res => {
					if (res.code == 200) {
						this.skillList = []
						this.columns[0] = [...res.data]
						res.data.forEach(item => {
							this.skillList.push({
								value: item.dictValue,
								label: item.dictLabel
							})
						})
					}
				})
			},
			clickChooseArea() {
				uni.navigateTo({
					url: `/subPages/index/chooseArea`
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let parent = this.cityList.filter(item => item.parentId == value[0].id)
					picker.setColumnValues(1, this.cityList.filter(item => item.parentId == value[0].id))
					picker.setColumnValues(2, this.cityList.filter(item => item.parentId == parent[0].id))
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.cityList.filter(item => item.parentId == value[1].id))
				}
			},
			// 回调参数为包含columnIndex、value、values
			cityConfirm({
				value
			}) {
				let nameList = []
				value.forEach(item => {
					nameList.push(item.cname)
				})
				this.region = nameList.join('/')
				this.FormData.province = value[0].id
				this.FormData.provinceString = value[0].cname
				this.FormData.city = value[1].id
				this.FormData.cityString = value[1].cname
				this.FormData.county = value[2].id
				this.FormData.countyString = value[2].cname
				this.show = false
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.placeholder-class {
		font-size: 26rpx;
		color: $main-font-auxiliary;
		line-height: 1;
	}

	.main-content {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #1a1a1a;

		.list-box {
			padding: 0 20rpx;
			border-radius: 16rpx;
			background: #ffffff;

			.title {
				padding: 20rpx 0;
				margin-left: 15rpx;
				display: block;
				border-bottom: 2rpx solid #acacac;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 40rpx;
				opacity: 0.9;
			}

		}
	}

	.form-item-vertical {
		.label {
			color: #1a1a1a;
			font-size: 28rpx;
			padding: 20rpx 0;
			// &::before {
			// 	content: "*";
			// 	color: red;
			// 	font-size: 30rpx;
			// 	display: inline-block;
			// 	margin-right: 10rpx;
			// 	width: 5rpx;
			// 	height: 20rpx;
			// }
		}
	}

	.upload-box {
		// height: 200rpx;
		width: 200rpx;
	}

	.upload-after {
		background: #F6F8FA;
		width: 198rpx;
		height: 198rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-data {
		/deep/.uni-forms-item__label {
			color: #666;
		}
	}

	.form_bottom_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 0 22rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		z-index: 2;

		.btn-box {
			width: 100%;
			height: 64px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: nowrap;

			.cancel {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #325ef5;
				background: #FFFFFF;
				border: 2rpx solid #325ef5;
				white-space: nowrap;
			}

			.confirm {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #FFFFFF;
				background: #325ef5;
			}

			.exhibition {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #325ef5;
				background: #FFFFFF;
			}
		}

		.agreement {
			.agreement-model {
				display: flex;
				width: 100%;

				/deep/.radio-box {
					width: 50rpx;
					height: 50rpx;

					.raio-item {}
				}

				text {
					font-size: 24rpx;
					color: $main-font-auxiliary;
				}

				.agreement-name {
					color: $main-color;
				}

			}
		}
	}

	/deep/ .u-upload__wrap {
		flex-wrap: nowrap !important;
	}

	.after-content {
		&::after {
			content: ' ';
			display: block;
			height: 8vh;
			width: 100%;
		}
	}
</style>